<script setup lang="ts">
import { useBIBaseInfo, useBIWorkInfo } from '@fl/api/add-elevator-api'

const areaCode = defineModel<string>('areaCode', { required: true })

const data1 = computed(() => {
    return [
        {
            iconUrl: 'blue-icon1.png',
            title: '全市社区总数/个',
            num: baseData.value?.communitiesAllCount || 0,
        },
        {
            iconUrl: 'blue-icon1.png',
            title: '具备加装条件社区总数/个',
            num: baseData.value?.communitiesCount || 0,
        },
        {
            iconUrl: 'blue-icon2.png',
            title: '6-9层小区总数/个',
            num: baseData.value?.sixProjectCount || 0,
        },
        {
            iconUrl: 'blue-icon2.png',
            title: '具备加装条件小区总数/个',
            num: baseData.value?.projectCount || 0,
        },
        {
            iconUrl: 'blue-icon3.png',
            title: '6-9层楼栋数/个',
            num: baseData.value?.sixBuildingCount || 0,
        },
        {
            iconUrl: 'blue-icon3.png',
            title: '具备加装条件楼栋总数/个',
            num: baseData.value?.buildingCount || 0,
        },
    ]
})

const data2 = computed(() => {
    return [
        {
            iconUrl: 'yellow-icon1.png',
            title: '需求上报/台',
            num: wordData.value?.submitCount || 0,
            sort: 1,
        },
        {
            iconUrl: 'yellow-icon2.png',
            title: '正在加装/台',
            num: wordData.value?.processCount || 0,
            sort: 2,
        },
        {
            iconUrl: 'yellow-icon3.png',
            title: '已加装/台',
            num: wordData.value?.finishCount || 0,
            sort: 3,
        },
        {
            iconUrl: 'yellow-icon4.png',
            title: '历史加装/台',
            num: wordData.value?.historyFinishCount || 0,
            sort: 4,
        },
        {
            iconUrl: 'yellow-icon5.png',
            title: '补贴申请/台',
            num: wordData.value?.subsidyCount || 0,
            sort: 15,
        },
        {
            iconUrl: 'yellow-icon6.png',
            title: '补贴到账/台',
            num: wordData.value?.subsidyReceivedCount || 0,
            sort: 6,
        },
    ]
})

// const areaCode = ref<string>('420102')
const { data: baseData } = useBIBaseInfo(areaCode)
const { data: wordData } = useBIWorkInfo(areaCode)

function getImageUrl(name: string): string {
    const images: Record<string, any> = import.meta.glob('@/assets/images/*', { eager: true })
    return images[`/src/assets/images/${name}`].default
}
</script>

<template>
    <div>
        <div class="title">
            <span>项目信息</span>
        </div>

        <div class="content">
            <!-- 1.基础信息 -->
            <div class="sub-title sub-title1" />

            <div class="sub-content">
                <div v-for="(item, index) in data1"
                     :key="index"
                     class="sub-content-item"
                >
                    <img class="item-icon"
                         :src="getImageUrl(item.iconUrl)"
                    >

                    <div class="item-right">
                        <div class="item-title two-line-ellipsis">
                            {{ item.title }}
                        </div>

                        <div class="colorful-text blue">
                            {{ item.num }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2.办理情况 -->
            <div class="sub-title sub-title2" />

            <div class="sub-content">
                <div v-for="(item, index) in data2"
                     :key="index"
                     class="sub-content-item"
                >
                    <img class="item-icon"
                         :src="getImageUrl(item.iconUrl)"
                    >

                    <div class="item-right">
                        <div class="item-title-box">
                            <div class="item-title two-line-ellipsis">
                                {{ item.title }}
                            </div>

                            <el-icon v-if="item.sort === 3"
                                     style="font-size:1.4em;"
                            >
                                <QuestionFilled />
                            </el-icon>

                            <div v-if="item.sort === 3"
                                 class="tips"
                            >
                                包含历史加装数量及2025年1月1日后完成电梯使用登记的数量
                            </div>

                            <el-icon v-if="item.sort === 4"
                                     style="font-size:1.4em;"
                            >
                                <QuestionFilled />
                            </el-icon>

                            <div v-if="item.sort === 4"
                                 class="tips"
                            >
                                指2024年12月31日前完成电梯使用登记的记录
                            </div>
                        </div>

                        <div class="colorful-text yellow">
                            {{ item.num }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.title {
    margin-left: 1.2em;
}
.content {
    padding: 1em 1.6em 0 1.6em;
    display: flex;
    flex-direction: column;
    height: calc(100% - 4.2em);
    margin-left: 1.6em;
    .sub-title1 {
        background-image: url('@/assets/images/sub-title1.png');
    }

    .sub-title2 {
        background-image: url('@/assets/images/sub-title2.png');
    }
    .sub-title {
        background-size: auto 100%;
        background-repeat: no-repeat;
        height: 2.4em;
        padding: 0.4em 1.2em;
        > span:first-child {
            font-size: 1.4em;
        }
    }
}

.sub-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.8em;
    row-gap: 0.8em;
    padding: 0.8em 0;
    min-width: 12em;

    .sub-content-item {
        min-width: 12em;
        height: 7.2em;
        background-image: url('@/assets/images/item-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: left;
        display: flex;
        // justify-content: center;
        align-items: center;
        .item-icon {
            width: 4em;
            height: 4em;
            margin: 0 0.9em;
        }
        .item-right {
            .item-title-box {
                display: flex;
                position: relative;
                align-items: center;
                .tips {
                    opacity: 0;
                    position: absolute;
                    top: -3em;
                    left: -1em;
                    background-color: rgba(0, 0, 0, 0.7);
                    transition: opacity 0.3s;
                    padding: 6px 10px;
                    border-radius: 4px;
                    white-space: nowrap;
                    font-size: 1.2em;
                    z-index: 9999;
                }
                &:hover {
                    .tips {
                        opacity: 1;
                    }
                }
            }
            .item-title {
                font-size: 1.2em;
                padding-right: 0.4em;
                line-height: 1.1em;
            }
            .colorful-text {
                font-size: 2em;
                font-weight: 600;
                font-family: D-DIN;
            }
            .blue {
                color: #31fbfb;
            }
            .yellow {
                color: #ffe048;
            }
        }
    }
}

.chart-content {
    min-height: 16em;
    position: relative;
}
.two-line-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
